<template>
  <div class="login-container flex-center">
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">{{ appTitle }}</h3>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="账号">
          <template #prefix> <SvgIcon name="User" /> </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" show-password placeholder="密码">
          <template #prefix> <SvgIcon name="Lock" /> </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <div class="flex items-center w-full">
          <el-input v-model="loginForm.captcha" placeholder="请输入验证码" @keydown.enter="handleLogin(loginFormRef)">
            <template #prefix> <SvgIcon name="Key" /> </template>
          </el-input>
          <img :src="captchaURL" alt="captcha" @click="getCaptcha" class="captcha-image" draggable="false" />
        </div>
      </el-form-item>
      <el-checkbox v-model="rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
      <el-form-item>
        <el-button :loading type="primary" class="w-full" size="large" @click.prevent="handleLogin(loginFormRef)">
          <span>{{ loading ? `登录中...` : `登录` }}</span>
        </el-button>
      </el-form-item>
    </el-form>

    <!--  底部  -->
    <div class="login-footer text-center">
      <span>Copyright © 2025-{{ currentYear }} snowbox All Rights Reserved.</span>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'Login' })
import type { FormInstance } from 'element-plus'

const appStore = useAppStore()
const appTitle = __RUNTIME_CONFIG__.VITE_APP_TITLE

/** 获取登录表单实例 */
const loginFormRef = ref<FormInstance>()
/** 解构登录逻辑及其数据 */
const { loading, loginForm, loginRules, captchaURL, rememberMe, getCaptcha, handleLogin } = useLogin()
/** 当前年份 */
const currentYear = new Date().getFullYear()
/** 动态设置登录表单宽度 */
const loginFormWidth = computed(() => (appStore.isDesktop ? '420px' : 'calc(100% - 32px)'))
</script>

<style lang="scss" scoped>
.login-container {
  --login-form-width: v-bind(loginFormWidth);
  --login-captcha-height: 38px;
  --login-captcha-border-radius: var(--el-border-radius-base);
  --login-input-height: 38px;
  position: relative;
  height: 100%;
  background-image: linear-gradient(to top, #2d8cc4, #d8d0d0);
  // background-image: linear-gradient(to top, var(--el-color-primary-light-7), var(--el-color-warning-light-9));
  background-size: cover;

  .login-form {
    width: var(--login-form-width);
    padding: 25px 25px 5px 25px;
    border-radius: 6px;
    background-color: #fff;

    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #707070;
      font-size: 20px;
      font-weight: 500;
    }

    .el-input {
      --el-input-height: var(--login-input-height);
    }

    .captcha-image {
      cursor: pointer;
      margin-left: 8px;
      height: var(--login-captcha-height);
      border-radius: var(--login-captcha-border-radius);
      box-shadow: var(--el-box-shadow);
    }
  }

  .login-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: var(--el-color-white);
    font-size: var(--el-font-size-extra-small);
    letter-spacing: 1px;
  }
}
</style>
